<template>
  <div style="height: 100%">
    <el-form class="query-form query-form-2" :model="formQuery">
      <el-row>
        <el-col :span="4">
          <el-form-item>
            <el-select clearable placeholder="设备类型" v-model="formQuery.fkEquipmentTypeId">
              <el-option
                v-for="item in equipment"
                :key="item.pkBasicdataId"
                :value="item.pkBasicdataId"
                :label="item.itemName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable placeholder="设备名称" v-model="formQuery.equipmentName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input clearable placeholder="设备序列号" v-model="formQuery.equipmentSerialNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select 
			@change="changeBuilding"
            clearable placeholder="所在楼宇" v-model="formQuery.fkBuildingId">
              <el-option
                v-for="item in building"
                :key="item.pkBuildingId"
                :label="item.buildingName"
                :value="item.pkBuildingId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select clearable placeholder="所在区域" v-model="formQuery.region">
              <el-option
                v-for="item in rooms"
                :key="item.pkRoomId"
                :value="item.pkRoomId"
                :label="item.houseNumber"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
            <el-form-item>
                <el-button @click="query">查询</el-button>
            </el-form-item>
        </el-col>
        <el-form-item style="position: absolute; top:0; right: 0.2rem">
          <el-button type="primary" @click="$router.push('./edit')">新增</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="formQuery.brand" placeholder="品牌"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="div-table" style="padding:0 20px;">
        <el-scrollbar style="height:100%;">
            <el-table ref="multipleTable" class="roomTable" :data="tableData" style="width: 100%">
                <el-table-column type="selection"></el-table-column>
                <el-table-column type="index" label="序号" width="70"></el-table-column>
                <el-table-column show-overflow-tooltip prop="equipmentName" label="设备名称"></el-table-column>
                <el-table-column show-overflow-tooltip prop="equipmentSerialNumber" label="设备序列号"></el-table-column>
                <el-table-column show-overflow-tooltip prop="deviceIpAddress" label="设备IP地址"></el-table-column>
                <el-table-column show-overflow-tooltip prop="equipmentTypeName" label="设备类型"></el-table-column>
                <el-table-column show-overflow-tooltip prop="brand" label="品牌"></el-table-column>
                <el-table-column show-overflow-tooltip prop="buildingName" label="所属楼宇"></el-table-column>
                <el-table-column show-overflow-tooltip prop="regionName" label="所属区域"></el-table-column>
                <el-table-column label="操作">
                <template slot-scope="{row}">
                    <router-link
                    class="el-link el-link--primary"
                    :to="`./edit?id=${row.pkDeviceManagementId}`"
                    >编辑</router-link>
                </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
    <div class="page-div-placeholder"></div>
    <div class="page-div" style="background:#fff;">
      <el-pagination
        layout="prev, pager, next,jumper,sizes"
        :current-page="pageObj.page"
        :page-size="pageObj.pageSize"
        :total="pageObj.total"
        :page-sizes="pageObj.pageSizes"
        @current-change="currentPageChange"
        @size-change="sizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { listMixin } from "@/mixin";
import { getAllByPage, getAllByCondition } from "@/api/operations/device";
import { getBuildingName ,getAllAreaNumber} from "@/api/house/building/building.js";
import { getOneAll, selectNameToId } from "@/api/common/common.js";

export default {
  mixins: [listMixin],
  data() {
    return {
      equipment: [],
      rooms: [],
      building: [],
      formQuery: {
          region:null
      },
      tableData: [],
    };
  },
  methods: {
    changeBuilding(id) {
        if (id) {
            getAllAreaNumber(id).then(res => {
                this.rooms = res.data.roomList;
                this.rooms.unshift({ pkRoomId: '0', houseNumber: '公共区域' });
                this.formQuery.region = null;
            });
        } else {
            this.rooms = [];
            this.formQuery.region = null;
        }
    },
    loadData() {
      if (this.where) {
        return getAllByCondition(this.where).then((res) => {
          let { data, total } = res;
          this.tableData = data;
          this.pageObj.total = total;
        });
      } else {
        return getAllByPage(this.pageObj).then((res) => {
          let { data, total } = res;
          this.tableData = data;
          this.pageObj.total = total;
        });
      }
    },
  },
  mounted() {
    this.loadDataProxy();
    getOneAll(selectNameToId("equipment")).then((res) => {
      this.equipment = res.data;
    });
    // getOneAll(selectNameToId("area")).then((res) => {
    //   this.area = res.data;
    // });
    getBuildingName().then((res) => {
      this.building = res.data;
    });
  },
};
</script>
